<!DOCTYPE html>
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Simple Web Store</title>
    <link rel="stylesheet" href="css/foundation.css" />

    <script src="js/vendor/custom.modernizr.js"></script>

    <link href="style/style.css" rel="stylesheet" />

    <!--<link href="style/main-style.css" rel="stylesheet" />-->
    <script src="script/sns-buttons.js"></script>
</head>
<body>
    <header>
        <nav class="top-bar">
            <ul class="title-area">
                <!-- Title Area -->
                <li class="name">
                    <h1>
                        <a href="index.html"># My Catalog</a>
                    </h1>
                </li>
                <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
            </ul>
            <section class="top-bar-section">
                <!-- Right Nav Section -->
                <ul class="right">
                    <li class="divider"></li>
                    <li class="has-dropdown">
                        <a href="#">Main Item 1</a>
                        <ul class="dropdown">
                            <li>
                                <label>Section Name</label></li>
                            <li class="has-dropdown">
                                <a href="#" class="">Has Dropdown, Level 1</a>
                                <ul class="dropdown">
                                    <li><a href="#">Dropdown Options</a></li>
                                    <li><a href="#">Dropdown Options</a></li>
                                    <li><a href="#">Level 2</a></li>
                                    <li><a href="#">Subdropdown Option</a></li>
                                    <li><a href="#">Subdropdown Option</a></li>
                                    <li><a href="#">Subdropdown Option</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Dropdown Option</a></li>
                            <li><a href="#">Dropdown Option</a></li>
                            <li class="divider"></li>
                            <li>
                                <label>Section Name</label></li>
                            <li><a href="#">Dropdown Option</a></li>
                            <li><a href="#">Dropdown Option</a></li>
                            <li><a href="#">Dropdown Option</a></li>
                            <li class="divider"></li>
                            <li><a href="#">See all &rarr;</a></li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Main Item 2</a></li>
                    <li class="divider"></li>
                    <li class="has-dropdown">
                        <a href="#">Main Item 3</a>
                        <ul class="dropdown">
                            <li><a href="#">Dropdown Option</a></li>
                            <li><a href="#">Dropdown Option</a></li>
                            <li><a href="#">Dropdown Option</a></li>
                            <li class="divider"></li>
                            <li><a href="#">See all &rarr;</a></li>
                        </ul>
                    </li>
                </ul>
            </section>
        </nav>
    </header>
    <!-- End Top Bar -->


    <!-- Main Page Content and Sidebar -->
    <div class="row">

        <!-- Contact Details -->
        <div class="large-9 columns">
            <div class="section-container tabs" data-section data-bind="foreach: menus">
                <section class="section">
                    <h5 class="title">
                        <a data-bind="text: $data, css: { selected: $data == $root.chosenMenuId() }, click: $root.goToMenu">Add Product</a>
                    </h5>
                </section>
            </div>
            <div class="section-container auto">
                <section class="section active">
                    <div id="site-main" class="content" data-slug="panel1">
                        <!-- dynamic content goes here  -->
                    </div>
                </section>
            </div>

        </div>

        <!-- End Contact Details -->


        <!-- Sidebar -->


        <div class="large-3 columns">
            <h5>Balance</h5>
            <!-- Clicking this placeholder fires the mapModal Reveal modal -->
            <div class="panel">
                <p>
                    <span class="subheader left">Balance in leva:</span>
                    <br />
                    <span class="subheader right">99000.10</span>
                </p>
                <p>
                    <span class="subheader left">Balance in USD:</span>
                    <br />
                    <span class="subheader right">10000.10</span>
                </p>
                <p>
                    <span class="subheader left">Balance in Euro:</span>
                    <br />
                    <span class="subheader right">99999910.00</span>
                </p>
                <a class="small button" href="#">Balance History</a>
            </div>
             <div id="social-networks">
                <div class="fb-like" data-href="https://www.facebook.com/cloudberryteamproject" data-send="false" data-width="60" data-show-faces="true">
                </div>
                <a href="https://twitter.com/share" data-url="https://www.facebook.com/cloudberryteamproject" class="twitter-share-button" data-lang="en">Tweet</a>
            </div>
        </div>
    </div>
    <!-- End Main Content and Sidebar -->


    <!-- Footer -->

    <footer class="row">
        <div class="large-12 columns">
            <hr />
            <div class="row">
                <div class="large-6 columns">
                    <p>&copy; Copyright Team "Cloudberry". Go to # My Catalog.</p>
                </div>
                <div class="large-6 columns">
                    <ul class="inline-list right">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                        <li><a href="#">Link 4</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div id="fb-root"></div>

    </footer>

    <!-- End Footer -->

    <script>
        document.write('<script src=' +
        ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
        '.js><\/script>')
    </script>


    <script src="script/libs/knockout-2.2.1.js"></script>
    <script src="script/libs/knockout.validation.js"></script>
    <script src="script/libs/mongoLab.js"></script>
    <script src="script/libs/jquery-2.0.1.js"></script>
    <script src="script/libs/ProtoClass.js"></script>
    <script src="script/libs/sammy.js"></script>
    <script src="script/simpleGrid.js"></script>
    <script src="script/catalog.js"></script>
    <script src="script/siteControler.js"></script>


    <script src="js/foundation.min.js"></script>

    <!--
  
  <script src="js/foundation/foundation.js"></script>
  
  <script src="js/foundation/foundation.alerts.js"></script>
  
  <script src="js/foundation/foundation.clearing.js"></script>
  
  <script src="js/foundation/foundation.cookie.js"></script>
  
  <script src="js/foundation/foundation.dropdown.js"></script>
  
  <script src="js/foundation/foundation.forms.js"></script>
  
  <script src="js/foundation/foundation.joyride.js"></script>
  
  <script src="js/foundation/foundation.magellan.js"></script>
  
  <script src="js/foundation/foundation.orbit.js"></script>
  
  <script src="js/foundation/foundation.reveal.js"></script>
  
  <script src="js/foundation/foundation.section.js"></script>
  
  <script src="js/foundation/foundation.tooltips.js"></script>
  
  <script src="js/foundation/foundation.topbar.js"></script>
  
  <script src="js/foundation/foundation.interchange.js"></script>
  
  <script src="js/foundation/foundation.placeholder.js"></script>
  
  -->
    <script>
        $(document).foundation();
    </script>
</body>
</html>
